<template>
    <div>
        <router-view />
        <div class="footer">
            <div @click="index = 1">
                <router-link to="/main/bookshelf">
                    <i class="activebookshelf bookshelf"></i>
                    <!-- <i :class="index == 1 ? 'activebookshelf' : 'bookshelf'"></i> -->
                    <span>书架</span>
                </router-link>
            </div>
            <div @click="index = 2">
                <router-link to="/main/found">
                    <i class="activefound found"></i>
                    <!-- <i class="found" :class="index == 2 ? 'activefound' : 'found'"></i> -->
                    <span>发现</span>
                </router-link>
            </div>
            <div @click="index = 3">
                <router-link to="/main/my">
                    <i class="my activemy"></i>
                    <span>我的</span>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            index: 2,
        };
    },
};
</script>

<style lang="scss" scoped>
.footer {
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 10px 25px #999;

    div {
        width: 33.3%;
    }
    a {
        font-size: 14px;
        color: #313131;
        height: 100%;
        display: block;
        width: 50%;
        margin: 0 auto;
        text-align: center;

        i {
            display: block;
            // background-color: red;
            width: 30px;
            height: 30px;
            margin: 0 auto;
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .bookshelf {
            background-image: url(@/assets/shujia.png);
        }

        .found {
            background-image: url(@/assets/faxian.png);
        }

        .my {
            background-image: url(@/assets/wode.png);
        }
    }
    .router-link-active {
        i.activebookshelf {
            background-image: url(@/assets/shujia2.png);
        }

        i.activefound {
            background-image: url(@/assets/faxian2.png);
        }

        i.activemy {
            background-image: url(@/assets/wode2.png);
        }
    }
}
</style>
